<template>
    <div class="flex flex-1 flex-col justify-center px-6 py-5">
        <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm lg:px-8">
            <form class="space-y-6" action="#" @submit.prevent="register">
                <div>
                    <label class="after:content-['*'] after:ml-0.5 after:text-red-500
                     block text-sm font-medium leading-6 text-base-content text-left">用户名</label>
                    <div class="mt-2">
                        <input id="username" name="username" type="text" maxlength="32"
                               placeholder="限制长度为3-32"
                               minlength="3"
                               v-model="user.username"
                               :class="[user.username.length >= 3 ? 'input-success':'input-error' ,'input input-bordered w-full focus:outline-0 rounded-md py-1.5 block']">
                    </div>

                    <label class="after:content-['*'] after:ml-0.5 after:text-red-500
                    block text-sm font-medium leading-6 text-base-content text-left">性别</label>
                    <div class="mt-2 w-full flex justify-around">
                        <label>
                            <input name="gender" type="radio" checked
                                   value="male"
                                   v-model="user.gender"
                                   class="radio text-base-content">
                            男
                        </label>
                        <label>
                            <input name="gender" type="radio"
                                   value="female"
                                   v-model="user.gender"
                                   class="radio text-base-content">
                            女
                        </label>
                    </div>

                    <label class="after:content-['*'] after:ml-0.5 after:text-red-500
                    block text-sm font-medium leading-6 text-base-content text-left">邮箱</label>
                    <div class="mt-2">
                        <input id="email" name="email" type="email" maxlength="32"
                               placeholder="XXX@XX.com"
                               v-model="user.email"
                               @change="emailCheck()"
                               :class="[user.email.length>=1 ? 'input-success':'input-error' ,  'peer input  input-bordered w-full rounded-md py-1.5 block']">
                        <div :class="[pageConfig.emailCheck ? 'visible' : 'invisible','peer-invalid:visible bg-error text-white']"
                            v-text="pageConfig.emailCheck ? '邮箱已存在' : '请输入正确的邮箱'"></div>
                    </div>

                    <label class="after:content-['*'] after:ml-0.5 after:text-red-500
                    block text-sm font-medium leading-6 text-base-content text-left">密码</label>
                    <div class="mt-2 relative" data-tip="111">
                        <div
                            :class="[pwd_1 != pwd_2 ? 'block': 'hidden',
                            'md:right-0 md:top-1 md:tooltip-right',
                            'left-1/2 bottom-0 tooltip-bottom',
                            'absolute tooltip tooltip-open tooltip-error']"
                            data-tip="两次密码不一致">
                        </div>
                        <input name="password" type="password" maxlength="32"
                               placeholder="password"
                               v-model="pwd_1"
                               :class="[pwd_1 == pwd_2 &&
                               pwd_1!=null && pwd_2!=null ?
                                'input-success':
                                pwd_2!=null?
                                'input-error':'input-bordered',
                                'input input-bordered w-full focus:outline-0 rounded-md py-1.5 block']">
                    </div>
                    <label class="after:content-['*'] after:ml-0.5 after:text-red-500
                    block text-sm font-medium leading-6 text-base-content text-left">确认密码</label>
                    <div class="mt-2 relative">
                        <input name="password"
                               type="password"
                               maxlength="32"
                               placeholder="password again ..."
                               required
                               v-model="pwd_2"
                               :class="[
                                   pwd_1 == pwd_2 &&
                                   pwd_1!= null && pwd_2!= null ?
                                    'input-success':
                                    pwd_1!= null ?
                                    'input-error':'input-bordered',
                                'input input-bordered w-full focus:outline-0 rounded-md py-1.5 block'
                                ]">
                    </div>
                    <div class="mt-2 flex-col md:flex-row  justify-around flex-1">
                        <button type="submit"
                                class="btn btn-active w-full my-2 rounded-md  px-3 py-1.5 focus:outline-0">
                            下一步
                        </button>
                        <router-link to="/login"
                                     class="btn btn-active btn-ghost w-full my-2 rounded-md  px-3 py-1.5 focus:outline-0">
                            取消
                        </router-link>
                    </div>

                    <ul class="steps mt-6">
                        <li class="step step-primary">注册</li>
                        <li class="step step-primary">设置个人信息</li>
                        <li class="step">登录</li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import {useAuthStore} from "../plugins/pinia.ts";
import axios from "axios";
import {hook_checkEmail} from "../hook/UserHook.ts";

let pageConfig = reactive({
    emailCheck: false,
})

let user = reactive({
    username: '',
    password: '',
    gender: 'male',
    email: '',
})
let pwd_1 = ref();
let pwd_2 = ref();

function register() {
    //信息校验
    if (
        pwd_1.value == pwd_2.value &&
        !pageConfig.emailCheck
    ) {
        user.password = pwd_1.value
        //将数据交给store
        let authStore = useAuthStore()
        authStore.register_step1(user)
    }
}

//email
async function emailCheck() {
  console.log(user.email);
  // axios.get('http://localhost:8080/user/checkEmail', {
  //     params: {
  //         email: user.email
  //     }
  // }).then((res) => {
  //     console.log(res.data)
  //     //flag => true/false ，不存在/存在
  //     pageConfig.emailCheck = !res.data.flag;
  // })
  let promise = await hook_checkEmail(user.email);
  pageConfig.emailCheck = !promise?.['flag'];
}

</script>

<style scoped>

</style>